<template>
  <div>
    <q-list bordered class="rounded-borders  no-shadow">
      <q-expansion-item
        @show="show"
        switch-toggle-side
        expand-separator
        header-class="bg-grey-2"
        label="一般数据"
      >
        <q-separator />
        <template v-slot:header>
          <div align="right" style="padding-top:5px;">一般数据</div>
        </template>
        <q-card>
          <q-card-section  @show="show">
            <div class="row q-col-gutter-sm">
              <div class="col-3">
                <div :class="$v.addOrEditForm.unitId.$error?'text-negative': ''">单位</div>
                <q-select
                :disable="disable"
                emit-value
                map-options
                dense
                :error="$v.addOrEditForm.unitId.$error"
                @blur="$v.addOrEditForm.unitId.$touch"
                v-model="addOrEditForm.unitId"
                :options="unitOption" />
              </div>
              <div class="col-3">
                <div :class="$v.addOrEditForm.statusId.$error?'text-negative': ''">状态</div>
                <q-select
                :disable="disable"
                emit-value
                map-options
                dense
                :error="$v.addOrEditForm.statusId.$error"
                @blur="$v.addOrEditForm.statusId.$touch"
                v-model="addOrEditForm.statusId"
                :options="statusOption" />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </q-expansion-item>
      <q-separator />
    </q-list>
  </div>
</template>

<script>
import { required } from 'vuelidate/lib/validators'
export default {
  props: {
    selectSiteId: {}
  },
  data () {
    return {
      addForm: 2,
      disable: true,
      unitOption: [],
      statusOption: [],
      addOrEditForm: {
        id: '',
        itemSiteId: '',
        unitId: '',
        statusId: ''
      }
    }
  },
  mounted () {
    // this.getUnit()
  },
  validations: {
    addOrEditForm: {
      unitId: { required },
      statusId: { required }
    }
  },
  watch: {
    'selectSiteId' () {
      this.show()
    }
  },
  methods: {
    edit () {
      this.disable = false
      this.addForm = 1
    },
    async listGet () {
      if (this.selectSiteId === '') {
        this.$q.notify({
          message: '请先选择维护地点',
          color: 'negative',
          icon: 'error_outline',
          position: 'top-right',
          timeout: 3000
        })
      } else {
        console.log(this.selectSiteId)
        await this.$api({
          method: 'get',
          url: `/mdm/item/baseInfo/findByItemSiteId/${this.selectSiteId}`,
          emulateJSON: true,
          useLoadLayer: true,
          successCallback: ({ data }) => {
            this.$v.addOrEditForm.$reset()
            if (data === null) {
              this.addOrEditForm = {
                id: '',
                itemSiteId: this.selectSiteId,
                unitId: '',
                statusId: ''
              }
            } else {
              this.addOrEditForm = {
                id: data.id,
                itemSiteId: this.selectSiteId,
                unitId: data.unitId,
                statusId: data.statusId
              }
            }
          },
          errorCallback (err) {
            console.log('未处理的业务级error：', err)
          }
        })
      }
    },
    async getUnit () {
      await this.$api({
        method: 'post',
        url: '/common/unit/selectAll',
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          let arr = []
          data.forEach(item => {
            let o = {}
            o.label = item.name
            o.value = item.id
            arr.push(o)
          })
          this.unitOption = arr
        }
      })
    },
    show () {
      this.getStatus()
      this.getUnit()
      this.listGet()
    },
    async getStatus () {
      await this.$api({
        method: 'post',
        url: '/common/dict/findByTypeCode/40',
        emulateJSON: true,
        useLoadLayer: true,
        successCallback: ({ data }) => {
          let arr = []
          data.forEach(item => {
            let o = {}
            o.label = item.name
            o.value = item.id
            arr.push(o)
          })
          this.statusOption = arr
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  /deep/.q-item
    min-height 30px
    max-height 35px
</style>
